<template>
	<view class="journey">
		<view class="head">
			<view class="is_have">
				<view class="logo">
					<image src="../../static/journey/a1.gif" mode=""></image>
				</view>
				<view class="tit">
					<view class="tit_t">
						“
					</view>
					<view class="tit_b">
						你最近没有行程哦
					</view>
				</view>
			</view>
			<view class="function">
				<view class="nav">
					<view class="nav_box">
						<view class="items">
							<view class="nav_img">
								<image src="../../static/journey/a2.gif" mode=""></image>
							</view>
							<view class="nav_name">
								酒店
							</view>
						</view>
						<view class="items">
							<view class="nav_img">
								<image src="../../static/journey/a3.gif" mode=""></image>
							</view>
							<view class="nav_name">
								机票
							</view>
						</view>
						<view class="items">
							<view class="nav_img">
								<image src="../../static/journey/a4.gif" mode=""></image>
							</view>
							<view class="nav_name">
								火车票
							</view>
						</view>
						<view class="items">
							<view class="nav_img">
								<image src="../../static/journey/a5.gif" mode=""></image>
							</view>
							<view class="nav_name">
								门票
							</view>
						</view>
					</view>
					<view class="nucleate">
						<view class="show">
							<view class="list">
								<view class="item">
									<text class="iconfont icon-erweima"></text>	 健康码
								</view>
								<view class="item">
									<text class="iconfont icon-xiangshang3"></text>  行程卡
								</view>
								<view class="item">
									<text class="iconfont icon-yiliaoxiang-xianxing2-0"></text>  核酸预约
								</view>
							</view>
						</view>
						<view class="hids">
							<view class="item">
								<text class="iconfont icon-zhengce"></text>  城市政策
							</view>
							<view class="item">
								<text class="iconfont icon-ditu"></text>  疫情地图
							</view>
							<view class="item">
								<text class="iconfont icon-tijianbaogaochaxun"></text>  核酸报告
							</view>
						</view>
					</view>
				</view>
			</view>		
		</view>
		<view class="main">
			<view class="title">
				行程推荐
			</view>
			<view class="travel_recommend">
				<view class="recommend">
					<view class="left">
						<view class="explain">
							寓教于乐  带宝宝来这里玩
						</view>
						<view class="plan">
							14.8万人正在计划去
						</view>
					</view>
					<view class="right">
						推荐
					</view>
				</view>
				<view class="scenic_spot">
					<view class="site">
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="travel_recommend">
				<view class="recommend">
					<view class="left">
						<view class="explain">
							寓教于乐  带宝宝来这里玩
						</view>
						<view class="plan">
							14.8万人正在计划去
						</view>
					</view>
					<view class="right">
						推荐
					</view>
				</view>
				<view class="scenic_spot">
					<view class="site">
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="travel_recommend">
				<view class="recommend">
					<view class="left">
						<view class="explain">
							寓教于乐  带宝宝来这里玩
						</view>
						<view class="plan">
							14.8万人正在计划去
						</view>
					</view>
					<view class="right">
						推荐
					</view>
				</view>
				<view class="scenic_spot">
					<view class="site">
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="travel_recommend">
				<view class="recommend">
					<view class="left">
						<view class="explain">
							寓教于乐  带宝宝来这里玩
						</view>
						<view class="plan">
							14.8万人正在计划去
						</view>
					</view>
					<view class="right">
						推荐
					</view>
				</view>
				<view class="scenic_spot">
					<view class="site">
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
						<view class="items_spot">
							<view class="spot_left">
								<image src="../../static/journey/a7.gif" mode=""></image>
							</view>
							<view class="spot_middle">
								<image src="../../static/journey/a6.gif" mode=""></image>
							</view>
							<view class="spot_right">
								<view class="name">
									北京大学
								</view>
								<view class="particulars">
									来自湖畔好读书
								</view>
								<view class="suggest">
									4.7分|1256条点评|游玩3小时
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		},
	}
</script>

<style lang="scss">
.journey{
	width: 100%;
	height: 100%;
	.head{
		height: 280upx;
		position: relative;
		background:linear-gradient(90deg, rgb(210,216, 228) 50%, rgb(254, 254, 254) 100%);
		.is_have{
			margin-left: 30upx;
			display: flex;
			.logo{
				image{
					width: 130upx;
					height: 120upx;
				}
			}
			.tit{
				margin-left: 15upx;
				.tit_t{
					margin-left: -60upx;
				font-size:120upx ;
				color: #aebfd1;
				}
				.tit_b{
					font-size: 30upx;
					margin-top: -80upx;
					font-weight: 600;
					margin-bottom: 24upx;
				}
			}
		
		}
		.function{
			width: 90%;
			position: absolute;
			border-radius: 30upx;
			// height: 300upx;
			padding: 30upx 0;
			background-color: white;
			margin: 0 30upx;
			// background-color: white;
			.nav{
				.nav_box{
					display: flex;
					justify-content: space-around;
					.items{
						margin-top: 40upx;
						width: 20%;
						display: flex;
						flex-direction: column;
						align-items: center;
						image{
							width: 60upx;
							height: 60upx;
						}
					}
				}
				.nucleate{
					margin: 0 20upx;
					margin-top: 30upx;
					border-top: 1upx solid #ccc;
					.show{
							.list{
								display: flex;
								justify-content: space-around;
								.item{
								flex: 1;
								margin-left:25upx;
								margin-top: 40upx;
							}
						}
					}
					.hid{
						margin-top: 2upx;
						display: flex;
						justify-content: space-around;
						.item{
							flex: 1;
							margin-top: 40upx;	
							margin-left:25upx;
						}
					}
					.hids{
						display: none;
					}
				}
			}
		}
	}
	.main{
		margin: 0 30upx;
		margin-top: 200upx;
		.title{
			font-weight: 600;
			font-size: 38upx;
		}
.travel_recommend:last-child{
	margin-bottom: 300upx;
}
		.travel_recommend{
			margin-top: 30upx;
			background-color: white;
			border-radius: 15upx;
			.recommend{
				border-radius: 15upx 15upx 0 0;
				height: 140upx;
				color: white;
				background-color: #aebfd1;
				display: flex;
				justify-content: space-between;
				.left{
					margin-left: 20upx;
					.explain{
						font-weight: 600;
						font-size: 30upx;
						margin: 20upx 0;
					}
					.plan{
						font-size: 24upx;
					}
				}
				.right{
					width: 90upx;
					height: 60upx;
					line-height: 60upx;
					text-align: center;
					font-size: 24upx;
					font-weight: 600;
					border-radius: 0 0 20upx 20upx;
					background: yellow;
					color: black;
					margin-right: 20upx;
				}
			}
			.scenic_spot{
				.site{
					.items_spot{
						display: flex;
						align-items: center;
						padding: 40upx;
						.spot_left{
							margin-right: 20upx;
							image{
								width: 40upx;
								height: 40upx;
							}
						}
						.spot_middle{
							margin-right: 20upx;
							image{
								width: 130upx;
								height: 130upx;
							}
						}
						.spot_right{
							line-height: 50upx;
							.name{
								font-weight: 600;
							}
							.particulars{
								font-size: 28upx;
								color: #fb7005;
							}
							.suggest{
								font-size: 24upx;
								color: #ccc;
							}
						}
					}
				}
			}
		}
	}
}
</style>
